/* screen - haochi */

.haochi {
  align-items: center;
  background-color: #0f0c03;
  display: flex;
  flex-direction: column;
  height: 12734px;
  width: 1920px;
}

.haochi .x2024-12-14-53054-1 {
  height: 1198px;
  width: 1920px;
  z-index: 5;
}

.haochi .x2024-12-14-53054-1 video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.haochi .x2024-12-14-53054-1 img {
  object-fit: cover;
}

.haochi .frame-19 {
  -webkit-backdrop-filter: blur(60px) brightness(100%);
  align-items: flex-start;
  backdrop-filter: blur(60px) brightness(100%);
  background-color: var(--black-3);
  border-radius: 23px;
  display: flex;
  gap: 915px;
  height: 70px;
  left: 40px;
  min-width: 1840px;
  padding: 11px 36px;
  position: fixed;
  top: 17px;
  z-index: 15;
}

.haochi .group-1171278889:hover {
  filter: blur(5px);
}

.haochi .group-1 {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 6px;
  min-width: 100px;
  transition: all 0.5s ease;
}

.haochi .group-1:hover {
  transform: scale(1.1);
}

.haochi .frame-1171278180 {
  background-color: var(--granite-gray-2);
  border-radius: 42px;
  cursor: pointer;
  height: 46px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 107px;
}

.haochi .frame-1171278180:hover {
  background-color: #585858
}

.haochi .frame-11712781:hover {
  background-color: #383838
}

.haochi .about-me {
  left: 18px;
  letter-spacing: -0.50px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 13px;
  white-space: nowrap;
}

.haochi .frame-1171278182:hover {
  background-color: #c5c5c5
}

.haochi .place {
  left: 24px;
  letter-spacing: -0.50px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 13px;
  white-space: nowrap;
}

.haochi .frame-1171278792 {
  align-items: flex-start;
  background-color: var(--black);
  border: 1px solid;
  border-color: var(--dove-gray);
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  gap: 1px;
  height: 70px;
  left: 1811px;
  overflow: hidden;
  padding: 24.5px 14.5px;
  position: fixed;
  top: 970px;
  transform: rotate(-90.00deg);
  transition: all 0.2s ease;
  width: 70px;
  z-index: 16;
}

.haochi .frame-1171278792:hover {
  background-color: #141414
}

.haochi .frame-1171278782 {
  align-items: center;
  display: flex;
  gap: 123px;
  height: 1195px;
  margin-right: 1.0px;
  padding: 123px 137px;
  width: 1919px;
  z-index: 6;
}

.haochi .flex-col {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-left: 60px;
  margin-top: 22.0px;
  min-height: 819px;
  width: 438px;
}

.haochi .frame-1171278696 {
  background-color: var(--mikado);
  border-radius: 15px;
  cursor: pointer;
  filter: blur(10px);
  height: 49px;
  margin-right: 40.0px;
  opacity: 0;
  overflow: hidden;
  position: relative;
  transition: all 0.4s ease;
  width: 90px;
}

.haochi .frame-1171278696.animate-enter162 {
  animation: animate-enter162-frames 0.40s ease-in-out 0.00s 1 normal forwards;
  filter: blur(10px);
  opacity: 0;
}

@keyframes animate-enter162-frames {
  from{opacity: 0;
filter: blur(10px);
}
to{opacity: 1;
filter: none;
}
}

.haochi .frame-1171278696:hover {
  transform: scale(1.1);
}

.haochi .text-431 {
  left: 20px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 12px;
}

.haochi .x2024-apm {
  color: var(--white);
  font-family: var(--font-family-galmuri11-regular);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  margin-right: 44.0px;
  margin-top: 22px;
  min-height: 75px;
  min-width: 168px;
  text-align: center;
}

.haochi .img_3270-1 {
  height: 621px;
  margin-top: 52px;
  width: 438px;
}

.haochi .overlap-group2 {
  align-self: flex-end;
  border-radius: 29px;
  height: 908px;
  position: relative;
  width: 1024px;
}

.haochi .rectangle-3480372 {
  background-color: #0f0d04;
  border: 1px solid;
  border-color: var(--gorse);
  border-radius: 29px;
  cursor: pointer;
  height: 908px;
  left: 0;
  position: absolute;
  top: 0;
  transition: all 0.2s ease;
  width: 1024px;
}

.haochi .rectangle-3480372:hover {
  background-color: #282400
}

.haochi .x1 {
  height: 622px;
  left: 55px;
  object-fit: cover;
  position: absolute;
  top: 232px;
  width: 442px;
}

.haochi .x2 {
  height: 622px;
  left: 526px;
  object-fit: cover;
  position: absolute;
  top: 232px;
  width: 442px;
}

.haochi .cctv {
  color: var(--gorse);
  font-family: var(--font-family-galmuri11-regular);
  font-size: var(--font-size-xl);
  font-weight: 400;
  left: 390px;
  line-height: normal;
  text-align: center;
  top: 118px;
}

.haochi .frame-1171278697 {
  background-color: var(--mikado);
  border-radius: 15px;
  cursor: pointer;
  filter: blur(10px);
  height: 49px;
  left: 467px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 35px;
  transition: all 0.4s ease;
  width: 90px;
}

.haochi .frame-1171278697.animate-enter163 {
  animation: animate-enter163-frames 0.40s ease-in-out 0.00s 1 normal forwards;
  filter: blur(10px);
  opacity: 0;
}

@keyframes animate-enter163-frames {
  from{opacity: 0;
filter: blur(10px);
}
to{opacity: 1;
filter: none;
}
}

.haochi .frame-1171278697:hover {
  transform: scale(1.1);
}

.haochi .text-432 {
  left: 28px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 12px;
}

.haochi .frame-1171278781 {
  background-image: url(../img/image-6345250.png);
  background-position: 50% 50%;
  background-size: cover;
  height: 1080px;
  margin-right: 1.0px;
  margin-top: 46px;
  opacity: 0.3;
  position: relative;
  transform: translate(0, 25px);
  width: 1919px;
  z-index: 2;
}

.haochi .frame-1171278781.animate-enter161 {
  animation: animate-enter161-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter161-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.haochi .text-424 {
  color: var(--white);
  font-family: var(--font-family-galmuri11-regular);
  font-size: 50px;
  font-weight: 400;
  left: 532px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 225px;
}

.haochi .text-425 {
  left: 285px;
  letter-spacing: 0;
  line-height: 32.4px;
  position: absolute;
  top: 613px;
  width: 415px;
}

.haochi .text-426 {
  left: 1302px;
  letter-spacing: 0;
  line-height: 32.4px;
  position: absolute;
  top: 507px;
  width: 404px;
}

.haochi .text-427 {
  left: 1302px;
  letter-spacing: 0;
  line-height: 32.4px;
  position: absolute;
  top: 625px;
  width: 404px;
}

.haochi .cctv-1 {
  left: 285px;
  line-height: 32.4px;
  top: 495px;
  width: 397px;
}

.haochi .frame-1171278696-1 {
  background-color: var(--mikado);
  border-radius: 15px;
  cursor: pointer;
  filter: blur(10px);
  height: 49px;
  left: 901px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 155px;
  transition: all 0.4s ease;
  width: 118px;
}

.haochi .frame-1171278696-1.animate-enter160 {
  animation: animate-enter160-frames 0.40s ease-in-out 0.00s 1 normal forwards;
  filter: blur(10px);
  opacity: 0;
}

@keyframes animate-enter160-frames {
  from{opacity: 0;
filter: blur(10px);
}
to{opacity: 1;
filter: none;
}
}

.haochi .frame-1171278696-1:hover {
  transform: scale(1.1);
}

.haochi .text-428 {
  left: 21px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 12px;
}

.haochi .overlap-group1-1 {
  height: 441px;
  left: 815px;
  position: absolute;
  top: 387px;
  width: 311px;
}

.haochi .group-17 {
  background-image: url(../img/----------1-2@2x.png);
  background-size: 100% 100%;
  height: 406px;
  left: 5px;
  position: absolute;
  top: 0;
  width: 289px;
}

.haochi .union {
  cursor: pointer;
  height: 416px;
  top: 24px;
  transition: all 0.4s ease;
  width: 311px;
}

.haochi .union:hover {
  opacity: 0;
}

.haochi .group-33 {
  height: 225px;
  left: 32px;
  position: absolute;
  top: 9px;
  width: 223px;
}

.haochi .rectangle-1064 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1065 {
  background-color: var(--white);
  height: 4px;
  left: 7px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1066 {
  background-color: var(--white);
  height: 4px;
  left: 13px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1067 {
  background-color: var(--white);
  height: 4px;
  left: 20px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1068 {
  background-color: var(--white);
  height: 4px;
  left: 27px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1069 {
  background-color: var(--black);
  height: 4px;
  left: 33px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1070 {
  background-color: var(--black);
  height: 4px;
  left: 40px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1071 {
  background-color: var(--black);
  height: 4px;
  left: 47px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1072 {
  background-color: var(--black);
  height: 4px;
  left: 53px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1073 {
  background-color: var(--black);
  height: 4px;
  left: 60px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1074 {
  background-color: var(--black);
  height: 4px;
  left: 66px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1075 {
  background-color: var(--black);
  height: 4px;
  left: 73px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1076 {
  background-color: var(--black);
  height: 4px;
  left: 80px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1077 {
  background-color: var(--black);
  height: 4px;
  left: 86px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1078 {
  background-color: var(--black);
  height: 4px;
  left: 93px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1079 {
  background-color: var(--black);
  height: 4px;
  left: 100px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1080 {
  background-color: var(--black);
  height: 4px;
  left: 106px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1081 {
  background-color: var(--black);
  height: 4px;
  left: 113px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1082 {
  background-color: var(--black);
  height: 4px;
  left: 120px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1083 {
  background-color: var(--black);
  height: 4px;
  left: 126px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1084 {
  background-color: var(--black);
  height: 4px;
  left: 133px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1085 {
  background-color: var(--black);
  height: 4px;
  left: 140px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1086 {
  background-color: var(--black);
  height: 4px;
  left: 146px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1087 {
  background-color: var(--black);
  height: 4px;
  left: 153px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1088 {
  background-color: var(--black);
  height: 4px;
  left: 160px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1089 {
  background-color: var(--black);
  height: 4px;
  left: 166px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1090 {
  background-color: var(--black);
  height: 4px;
  left: 173px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1091 {
  background-color: var(--black);
  height: 4px;
  left: 179px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1092 {
  background-color: var(--black);
  height: 4px;
  left: 186px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1093 {
  background-color: var(--white);
  height: 4px;
  left: 193px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1094 {
  background-color: var(--white);
  height: 4px;
  left: 199px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1095 {
  background-color: var(--white);
  height: 4px;
  left: 206px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1096 {
  background-color: var(--white);
  height: 4px;
  left: 213px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1097 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 22px;
  width: 4px;
}

.haochi .rectangle-1098 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 28px;
  width: 4px;
}

.haochi .rectangle-1128 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 28px;
  width: 4px;
}

.haochi .rectangle-1099 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 35px;
  width: 4px;
}

.haochi .rectangle-1129 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 35px;
  width: 4px;
}

.haochi .rectangle-1100 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 42px;
  width: 4px;
}

.haochi .rectangle-1130 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 42px;
  width: 4px;
}

.haochi .rectangle-1101 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 48px;
  width: 4px;
}

.haochi .rectangle-1131 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 48px;
  width: 4px;
}

.haochi .rectangle-1102 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 55px;
  width: 4px;
}

.haochi .rectangle-1132 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 55px;
  width: 4px;
}

.haochi .rectangle-1103 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 62px;
  width: 4px;
}

.haochi .rectangle-1133 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 62px;
  width: 4px;
}

.haochi .rectangle-1104 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 68px;
  width: 4px;
}

.haochi .rectangle-1134 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 68px;
  width: 4px;
}

.haochi .rectangle-1105 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 75px;
  width: 4px;
}

.haochi .rectangle-1135 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 75px;
  width: 4px;
}

.haochi .rectangle-1106 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 82px;
  width: 4px;
}

.haochi .rectangle-1136 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 82px;
  width: 4px;
}

.haochi .rectangle-1107 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 88px;
  width: 4px;
}

.haochi .rectangle-1137 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 88px;
  width: 4px;
}

.haochi .rectangle-1108 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 95px;
  width: 4px;
}

.haochi .rectangle-1138 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 95px;
  width: 4px;
}

.haochi .rectangle-1109 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 102px;
  width: 4px;
}

.haochi .rectangle-1139 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 102px;
  width: 4px;
}

.haochi .rectangle-1110 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 108px;
  width: 4px;
}

.haochi .rectangle-1140 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 108px;
  width: 4px;
}

.haochi .rectangle-1111 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 115px;
  width: 4px;
}

.haochi .rectangle-1141 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 115px;
  width: 4px;
}

.haochi .rectangle-1112 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 121px;
  width: 4px;
}

.haochi .rectangle-1142 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 121px;
  width: 4px;
}

.haochi .rectangle-1113 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 128px;
  width: 4px;
}

.haochi .rectangle-1143 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 128px;
  width: 4px;
}

.haochi .rectangle-1114 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 135px;
  width: 4px;
}

.haochi .rectangle-1144 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 135px;
  width: 4px;
}

.haochi .rectangle-1115 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 141px;
  width: 4px;
}

.haochi .rectangle-1145 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 141px;
  width: 4px;
}

.haochi .rectangle-1116 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 148px;
  width: 4px;
}

.haochi .rectangle-1146 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 148px;
  width: 4px;
}

.haochi .rectangle-1117 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 155px;
  width: 4px;
}

.haochi .rectangle-1147 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 155px;
  width: 4px;
}

.haochi .rectangle-1118 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 161px;
  width: 4px;
}

.haochi .rectangle-1148 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 161px;
  width: 4px;
}

.haochi .rectangle-1119 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 168px;
  width: 4px;
}

.haochi .rectangle-1149 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 168px;
  width: 4px;
}

.haochi .rectangle-1120 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 175px;
  width: 4px;
}

.haochi .rectangle-1150 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 175px;
  width: 4px;
}

.haochi .rectangle-1121 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 181px;
  width: 4px;
}

.haochi .rectangle-1151 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 181px;
  width: 4px;
}

.haochi .rectangle-1122 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 188px;
  width: 4px;
}

.haochi .rectangle-1152 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 188px;
  width: 4px;
}

.haochi .rectangle-1123 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 195px;
  width: 4px;
}

.haochi .rectangle-1153 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 195px;
  width: 4px;
}

.haochi .rectangle-1124 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 201px;
  width: 4px;
}

.haochi .rectangle-1154 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 201px;
  width: 4px;
}

.haochi .rectangle-1125 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 208px;
  width: 4px;
}

.haochi .rectangle-1155 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 208px;
  width: 4px;
}

.haochi .rectangle-1126 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 215px;
  width: 4px;
}

.haochi .rectangle-1156 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 215px;
  width: 4px;
}

.haochi .rectangle-1157 {
  background-color: var(--white);
  height: 4px;
  left: 0;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1158 {
  background-color: var(--white);
  height: 4px;
  left: 7px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1159 {
  background-color: var(--white);
  height: 4px;
  left: 13px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1160 {
  background-color: var(--white);
  height: 4px;
  left: 20px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1161 {
  background-color: var(--white);
  height: 4px;
  left: 27px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1162 {
  background-color: var(--black);
  height: 4px;
  left: 33px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1163 {
  background-color: var(--black);
  height: 4px;
  left: 40px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1164 {
  background-color: var(--black);
  height: 4px;
  left: 47px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1165 {
  background-color: var(--black);
  height: 4px;
  left: 53px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1166 {
  background-color: var(--black);
  height: 4px;
  left: 60px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1167 {
  background-color: var(--black);
  height: 4px;
  left: 66px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1168 {
  background-color: var(--black);
  height: 4px;
  left: 73px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1169 {
  background-color: var(--black);
  height: 4px;
  left: 80px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1170 {
  background-color: var(--black);
  height: 4px;
  left: 86px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1171 {
  background-color: var(--black);
  height: 4px;
  left: 93px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1172 {
  background-color: var(--black);
  height: 4px;
  left: 100px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1173 {
  background-color: var(--black);
  height: 4px;
  left: 106px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1174 {
  background-color: var(--black);
  height: 4px;
  left: 113px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1175 {
  background-color: var(--black);
  height: 4px;
  left: 120px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1176 {
  background-color: var(--black);
  height: 4px;
  left: 126px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1177 {
  background-color: var(--black);
  height: 4px;
  left: 133px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1178 {
  background-color: var(--black);
  height: 4px;
  left: 140px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1179 {
  background-color: var(--black);
  height: 4px;
  left: 146px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1180 {
  background-color: var(--black);
  height: 4px;
  left: 153px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1181 {
  background-color: var(--black);
  height: 4px;
  left: 160px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1182 {
  background-color: var(--black);
  height: 4px;
  left: 166px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1183 {
  background-color: var(--black);
  height: 4px;
  left: 173px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1184 {
  background-color: var(--black);
  height: 4px;
  left: 179px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1185 {
  background-color: var(--black);
  height: 4px;
  left: 186px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1186 {
  background-color: var(--black);
  height: 4px;
  left: 193px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1187 {
  background-color: var(--black);
  height: 4px;
  left: 199px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1188 {
  background-color: var(--black);
  height: 4px;
  left: 206px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1189 {
  background-color: var(--white);
  height: 4px;
  left: 213px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .rectangle-1127 {
  background-color: var(--white);
  height: 4px;
  left: 219px;
  position: absolute;
  top: 221px;
  width: 4px;
}

.haochi .overlap-group-3 {
  height: 22px;
  left: 0;
  position: absolute;
  top: 0;
  width: 73px;
}

.haochi .rectangle-1190 {
  background-color: var(--white);
  height: 22px;
  left: 0;
  position: absolute;
  top: 0;
  width: 31px;
}

.haochi .rectangle-1191 {
  background-color: var(--black);
  height: 22px;
  left: 31px;
  position: absolute;
  top: 0;
  width: 42px;
}

.haochi .rectangle-1192 {
  background-color: var(--nobel);
  height: 3px;
  left: 31px;
  position: absolute;
  top: 0;
  width: 4px;
}

.haochi .rectangle-1193 {
  background-color: var(--black);
  height: 3px;
  left: 27px;
  position: absolute;
  top: 0;
  width: 4px;
}

.haochi .unidentified {
  height: 9px;
  left: 5px;
  position: absolute;
  top: 7px;
  width: 60px;
}

.haochi .cctv-constantly-capt {
  left: 746px;
  letter-spacing: 0;
  line-height: 32.4px;
  position: absolute;
  top: 294px;
  white-space: nowrap;
}

.haochi .view {
  height: 1112px;
  margin-left: 1.0px;
  opacity: 0.3;
  overflow: hidden;
  transform: translate(0, 25px);
  width: 1919px;
  z-index: 11;
}

.haochi .view.animate-enter173 {
  animation: animate-enter173-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0.3;
  transform: translate(0, 25px);
}

@keyframes animate-enter173-frames {
  from{opacity: 0.3;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.haochi .overlap-group6 {
  height: 1078px;
  left: -88px;
  position: relative;
  top: -13px;
  width: 2007px;
}

.haochi .x1-1 {
  height: 1078px;
  left: 93px;
  opacity: 0.11;
  position: absolute;
  top: 0;
  width: 1914px;
}

.haochi .group-1000001640 {
  cursor: pointer;
  height: 225px;
  left: 1579px;
  opacity: 0;
  position: absolute;
  top: 146px;
  transform: translate(0, 25px);
  transition: all 0.4s ease;
  width: 367px;
}

.haochi .group-1000001640.animate-enter169 {
  animation: animate-enter169-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter169-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.haochi .group-1000001640:hover {
  transform: scale(1.2);
}

.haochi .overlap-group1-2 {
  height: 225px;
  position: relative;
  width: 365px;
}

.haochi .overlap-group-4 {
  align-items: flex-start;
  background-image: url(../img/union-8.svg);
  background-size: 100% 100%;
  display: flex;
  height: 225px;
  justify-content: flex-end;
  left: 0;
  min-width: 365px;
  padding: 45.9px 13.4px;
  position: absolute;
  top: 0;
}

.haochi .text-440 {
  letter-spacing: 0;
  line-height: 27.0px;
  min-height: 54px;
  width: 311px;
}

.haochi .text-441 {
  left: 251px;
  letter-spacing: 0;
  line-height: 27.0px;
  position: absolute;
  text-align: right;
  top: 112px;
  white-space: nowrap;
}

.haochi .group-1000001645 {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 42px;
  left: 757px;
  min-height: 105px;
  position: absolute;
  top: 153px;
  width: 586px;
}

.haochi .text-442 {
  color: var(--white);
  font-family: var(--font-family-galmuri11-regular);
  font-size: 70.5px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 29.3px;
  margin-right: 4.0px;
  min-height: 30px;
  min-width: 582px;
  text-align: center;
  white-space: nowrap;
}

.haochi .overlap-group2-1 {
  align-items: flex-start;
  background-color: var(--j4ie3l);
  display: flex;
  height: 33px;
  margin-right: 8.0px;
  min-width: 472px;
  padding: 2px 28px;
}

.haochi .the-daily-life-of-multiple-times {
  letter-spacing: 0;
  line-height: 27.0px;
  min-height: 27px;
  white-space: nowrap;
}

.haochi .group-1000001643 {
  height: 95px;
  left: 1665px;
  opacity: 0;
  position: absolute;
  top: 667px;
  transform: scale(1.1);
  width: 286px;
}

.haochi .group-1000001643.animate-enter170 {
  animation: animate-enter170-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: scale(1.1);
}

@keyframes animate-enter170-frames {
  from{opacity: 0;
transform: scale(1.1);
}
to{opacity: 1;
transform: scale(1);
}
}

.haochi .text-container {
  align-items: flex-end;
  background-image: url(../img/subtract-12.svg);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  gap: 19px;
  min-height: 95px;
  padding: 10.1px 26.4px;
}

.haochi .text-443 {
  align-self: center;
  color: var(--earls-green);
  font-family: var(--font-family-galmuri11-regular);
  font-size: var(--font-size-xxs);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 18.5px;
  margin-left: 0.24px;
  margin-top: 18px;
  min-height: 19px;
  width: 213px;
}

.haochi .text-444 {
  color: var(--earls-green);
  font-family: var(--font-family-galmuri11-regular);
  font-size: var(--font-size-xxs);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 18.5px;
  min-height: 19px;
  min-width: 46px;
  white-space: nowrap;
}

.haochi .group-1000001641 {
  cursor: pointer;
  height: 136px;
  left: 275px;
  opacity: 0;
  position: absolute;
  top: 285px;
  transform: scale(1.1);
  transition: all 0.6s ease;
  width: 384px;
}

.haochi .group-1000001641.animate-enter171 {
  animation: animate-enter171-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: scale(1.1);
}

@keyframes animate-enter171-frames {
  from{opacity: 0;
transform: scale(1.1);
}
to{opacity: 1;
transform: scale(1);
}
}

.haochi .group-1000001641:hover {
  transform: scale(1.1);
}

.haochi .overlap-group3 {
  height: 136px;
  position: relative;
}

.haochi .union-1 {
  height: 136px;
  top: 0;
  width: 221px;
}

.haochi .text-445 {
  color: var(--black);
  font-family: var(--font-family-galmuri11-regular);
  font-size: var(--font-size-s);
  font-weight: 400;
  left: 32px;
  letter-spacing: 0;
  line-height: 25px;
  position: absolute;
  top: 22px;
  width: 352px;
}

.haochi .text-446 {
  color: var(--black);
  font-family: var(--font-family-galmuri11-regular);
  font-size: var(--font-size-s);
  font-weight: 400;
  left: 149px;
  letter-spacing: 0;
  line-height: 30.5px;
  position: absolute;
  text-align: right;
  top: 65px;
  white-space: nowrap;
}

.haochi .text-447 {
  color: transparent;
  font-family: var(--font-family-galmuri11-regular);
  font-size: var(--font-size-xs);
  font-weight: 400;
  left: 543px;
  letter-spacing: 0;
  line-height: 31.3px;
  position: absolute;
  top: 742px;
  width: 1010px;
}

.haochi .group-1000001642 {
  cursor: pointer;
  height: 156px;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 922px;
  transform: scale(1.1);
  transition: all 0.6s ease;
  width: 469px;
}

.haochi .group-1000001642.animate-enter172 {
  animation: animate-enter172-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: scale(1.1);
}

@keyframes animate-enter172-frames {
  from{opacity: 0;
transform: scale(1.1);
}
to{opacity: 1;
transform: scale(1);
}
}

.haochi .group-1000001642:hover {
  transform: scale(1.1);
}

.haochi .text-container-1 {
  align-items: flex-start;
  background-image: url(../img/subtract-13.svg);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  gap: 19px;
  left: 88px;
  min-height: 156px;
  padding: 37.2px 5px;
  position: relative;
  width: 381px;
}

.haochi .text-448 {
  color: var(--earls-green);
  font-family: var(--font-family-galmuri11-regular);
  font-size: 25.7px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 29.6px;
  margin-top: 1px;
  min-height: 30px;
  width: 341px;
}

.haochi .text-449 {
  align-self: flex-end;
  color: var(--earls-green);
  font-family: var(--font-family-galmuri11-regular);
  font-size: 27.3px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 31.5px;
  margin-right: 57px;
  min-height: 32px;
  min-width: 78px;
  white-space: nowrap;
}

.haochi .group-1171278958 {
  align-items: flex-start;
  background-color: var(--black);
  display: flex;
  height: 307px;
  left: 682px;
  min-width: 732px;
  padding: 38px 0;
  position: absolute;
  top: 332px;
}

.haochi .frame-1171278834 {
  align-items: center;
  display: inline-flex;
  gap: 21px;
  position: relative;
}

.haochi .frame-1171278834-item {
  height: 230px;
  object-fit: cover;
  position: relative;
  width: 230px;
}

.haochi .text-430 {
  color: var(--white);
  font-family: var(--font-family-galmuri11-regular);
  font-size: 50px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  margin-left: 1.0px;
  margin-top: 320px;
  min-height: 67px;
  min-width: 613px;
  z-index: 4;
}

.haochi .text-429 {
  color: #858585;
  font-family: var(--font-family-galmuri11-regular);
  font-size: var(--font-size-s);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 32.4px;
  margin-left: 1.0px;
  margin-top: 15px;
  min-height: 64px;
  text-align: center;
  width: 425px;
  z-index: 3;
}

.haochi .vector-3352 {
  height: 188px;
  margin-left: 14.0px;
  margin-top: 38px;
  width: 1px;
  z-index: 10;
}

.haochi .frame-1171278787 {
  height: 1080px;
  margin-top: 12px;
  opacity: 0;
  position: relative;
  transform: translate(0, 25px);
  width: 1920px;
  z-index: 9;
}

.haochi .frame-1171278787.animate-enter168 {
  animation: animate-enter168-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter168-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.haochi .cctv-2 {
  left: 748px;
  line-height: 32.4px;
  text-align: center;
  top: 143px;
  width: 425px;
}

.haochi .frame-1171278696-2 {
  background-color: var(--mikado);
  border-radius: 15px;
  cursor: pointer;
  filter: blur(10px);
  height: 49px;
  left: 492px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 246px;
  transition: all 0.4s ease;
  width: 118px;
}

.haochi .frame-1171278696-2.animate-enter166 {
  animation: animate-enter166-frames 0.40s ease-in-out 0.00s 1 normal forwards;
  filter: blur(10px);
  opacity: 0;
}

@keyframes animate-enter166-frames {
  from{opacity: 0;
filter: blur(10px);
}
to{opacity: 1;
filter: none;
}
}

.haochi .frame-1171278696-2:hover {
  transform: scale(1.1);
}

.haochi .text-437 {
  left: 51px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 12px;
}

.haochi .frame-1171278783 {
  background-color: var(--mikado);
  border-radius: 15px;
  cursor: pointer;
  filter: blur(10px);
  height: 49px;
  left: 1389px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 246px;
  transition: all 0.4s ease;
  width: 118px;
}

.haochi .frame-1171278783.animate-enter167 {
  animation: animate-enter167-frames 0.40s ease-in-out 0.00s 1 normal forwards;
  filter: blur(10px);
  opacity: 0;
}

@keyframes animate-enter167-frames {
  from{opacity: 0;
filter: blur(10px);
}
to{opacity: 1;
filter: none;
}
}

.haochi .frame-1171278783:hover {
  transform: scale(1.1);
}

.haochi .text-438 {
  left: 34px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 12px;
}

.haochi .overlap-group5 {
  align-items: flex-start;
  background-image: url(../img/---------------3.png);
  background-size: 100% 100%;
  display: flex;
  height: 695px;
  justify-content: flex-end;
  left: 44px;
  min-width: 1001px;
  padding: 66px 137px;
  position: absolute;
  top: 304px;
}

.haochi .x2024-12-14-65038-1 {
  height: 402px;
  width: 715px;
}

.haochi .x2024-12-14-65038-1 video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.haochi .x2024-12-14-65038-1 img {
  object-fit: cover;
}

.haochi .frame-1171278784 {
  align-items: center;
  border: 1px solid;
  border-color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 30px;
  justify-content: center;
  left: 788px;
  padding: 5px 13px;
  position: absolute;
  top: 86px;
  width: 30px;
}

.haochi .number-2 {
  margin-left: -2.00px;
  margin-right: -2.00px;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.haochi .text-439 {
  left: 838px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 79px;
}

.haochi .x2024-12-14-70222-1 {
  border-radius: 60px;
  height: 626px;
  left: 1296px;
  position: absolute;
  top: 367px;
  width: 304px;
}

.haochi .x2024-12-14-70222-1 video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.haochi .x2024-12-14-70222-1 img {
  object-fit: cover;
}

.haochi .frame-1171278786 {
  height: 1080px;
  margin-top: 87px;
  opacity: 0;
  position: relative;
  transform: translate(0, 25px);
  width: 1920px;
  z-index: 7;
}

.haochi .frame-1171278786.animate-enter164 {
  animation: animate-enter164-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter164-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.haochi .text-43 {
  left: 748px;
  letter-spacing: 0;
  line-height: 32.4px;
  position: absolute;
  text-align: center;
  top: 170px;
  width: 425px;
}

.haochi .overlap-group {
  align-items: flex-start;
  background-image: url(../img/---------------3.png);
  background-size: 100% 100%;
  display: flex;
  height: 695px;
  justify-content: flex-end;
  left: 44px;
  min-width: 1001px;
  padding: 66px 137px;
  position: absolute;
  top: 271px;
}

.haochi .x2-1 {
  height: 402px;
  width: 715px;
}

.haochi .group-1171278941 {
  align-items: center;
  display: flex;
  gap: 16px;
  height: 41px;
  left: 869px;
  min-width: 185px;
  position: absolute;
  top: 113px;
}

.haochi .frame-1171278785 {
  align-items: center;
  border: 1px solid;
  border-color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 30px;
  justify-content: center;
  padding: 5px 13px;
  position: relative;
  width: 30px;
}

.haochi .number {
  margin-left: -3.50px;
  margin-right: -3.50px;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.haochi .text-434 {
  letter-spacing: 0;
  line-height: normal;
  min-height: 41px;
  min-width: 137px;
  text-align: center;
}

.haochi .x2-2 {
  border-radius: 52px;
  height: 626px;
  left: 1296px;
  position: absolute;
  top: 306px;
  width: 304px;
}

.haochi .x2-2 video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.haochi .x2-2 img {
  object-fit: cover;
}

.haochi .frame-1171278788 {
  height: 1080px;
  margin-top: 87px;
  opacity: 0;
  position: relative;
  transform: translate(0, 25px);
  width: 1920px;
  z-index: 8;
}

.haochi .frame-1171278788.animate-enter165 {
  animation: animate-enter165-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter165-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.haochi .x {
  height: 402px;
  width: 715px;
}

.haochi .x video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.haochi .x img {
  object-fit: cover;
}

.haochi .group-1171278941-1 {
  align-items: center;
  display: flex;
  gap: 18px;
  height: 41px;
  left: 851px;
  min-width: 218px;
  position: absolute;
  top: 113px;
}

.haochi .text-436 {
  letter-spacing: 0;
  line-height: normal;
  min-height: 41px;
  min-width: 168px;
  text-align: center;
}

.haochi .x4 {
  border-radius: 52px;
  height: 626px;
  left: 1296px;
  position: absolute;
  top: 306px;
  width: 305px;
}

.haochi .x4 video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.haochi .x4 img {
  object-fit: cover;
}

.haochi .frame-1171278791 {
  height: 1279px;
  margin-left: 1.0px;
  margin-top: 362px;
  opacity: 0;
  transform: translate(0, 25px);
  width: 1919px;
  z-index: 12;
}

.haochi .frame-1171278791.animate-enter174 {
  animation: animate-enter174-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter174-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.haochi .overlap-group7 {
  height: 1279px;
  position: relative;
}

.haochi .x1-2 {
  cursor: pointer;
  height: 1279px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  transition: all 0.4s ease;
  width: 1919px;
}

.haochi .x1-2:hover {
  transform: scale(1.1);
}

.haochi .vector {
  height: 71px;
  left: 511px;
  position: absolute;
  top: 50px;
  width: 103px;
}

.haochi .constantly-capturing-temproal-vision {
  left: 677px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 63px;
}

.haochi .overlap-group17 {
  height: 705px;
  margin-right: 30.0px;
  margin-top: 304px;
  position: relative;
  width: 1524px;
  z-index: 1;
}

.haochi .ellipse-8181 {
  background-color: var(--j4ie3l);
  border-radius: 332px;
  cursor: pointer;
  filter: blur(361.3px);;
  height: 664px;
  left: 445px;
  opacity: 0.08;
  position: absolute;
  top: 0;
  transition: all 0.6s ease;
  width: 664px;
}

.haochi .ellipse-8181:hover {
  transform: scale(2);
}

.haochi .frame-1171278691 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 518px;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 187px;
  transform: translate(0, 25px);
  transition: all 0.2s ease;
  width: 747px;
}

.haochi .frame-1171278691.animate-enter176 {
  animation: animate-enter176-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter176-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.haochi .frame-1171278691:hover {
  background-color: #3E3E3E
}

.haochi .overlap-group-1 {
  height: 625px;
  left: 19px;
  position: relative;
  top: 20px;
  width: 707px;
}

.haochi .overlap-group-2 {
  height: 625px;
  left: 0;
  position: absolute;
  top: 0;
  width: 707px;
}

.haochi .frame-1171278688 {
  border-radius: 19.53px;
  height: 390px;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transform: translate(0, 25px);
  width: 707px;
}

.haochi .frame-1171278688.animate-enter175 {
  animation: animate-enter175-frames 0.40s ease 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter175-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.haochi .overlap-group-5 {
  height: 470px;
  left: 3px;
  position: relative;
  top: -39px;
  width: 703px;
}

.haochi .x1-3 {
  cursor: pointer;
  height: 470px;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  transition: all 0.5s ease;
  width: 703px;
}

.haochi .x1-3:hover {
  transform: scale(1.1);
}

.haochi .frame-1171278694 {
  align-items: flex-start;
  background-color: var(--black);
  border-radius: 55px;
  display: flex;
  height: 35px;
  left: 6px;
  overflow: hidden;
  padding: 9px 25px;
  position: absolute;
  top: 49px;
  width: 87px;
}

.haochi .number-1 {
  min-height: 15px;
  white-space: nowrap;
}

.haochi .mobile-app-design {
  left: 117px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 413px;
  white-space: nowrap;
}

.haochi .ellipse-8183 {
  background-color: var(--alto);
  border-radius: 216px;
  filter: blur(284.5px);;
  height: 432px;
  left: 139px;
  opacity: 0.11;
  position: absolute;
  top: 193px;
  width: 432px;
}

.haochi .frame-1171278687 {
  align-items: flex-end;
  border: 0.49px solid;
  border-color: var(--white);
  border-radius: 32.71px;
  display: flex;
  height: 22px;
  left: 9px;
  overflow: hidden;
  padding: 4.9px 15.7px;
  position: absolute;
  top: 458px;
  width: 83px;
}

.haochi .ui-design {
  letter-spacing: 0;
  line-height: normal;
  margin-left: 1px;
  min-height: 12px;
  min-width: 51px;
  text-align: center;
  white-space: nowrap;
}

.haochi .vector-3297 {
  cursor: pointer;
  height: 29px;
  left: 665px;
  position: absolute;
  top: 413px;
  transition: all 0.4s ease;
  width: 29px;
}

.haochi .vector-3297:hover {
  transform: rotate(45deg);
}

.haochi .frame-1171278731 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 518px;
  left: 777px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 187px;
  transform: translate(0, 25px);
  transition: all 0.2s ease;
  width: 747px;
}

.haochi .frame-1171278731.animate-enter178 {
  animation: animate-enter178-frames 0.50s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter178-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.haochi .frame-1171278731:hover {
  background-color: #3e3e3e
}

.haochi .overlap-group11 {
  height: 626px;
  left: 20px;
  position: relative;
  top: 19px;
  width: 707px;
}

.haochi .overlap-group1 {
  height: 626px;
  left: 0;
  position: absolute;
  top: 0;
  width: 707px;
}

.haochi .frame-1171278688-1 {
  border-radius: 19.49px;
}

.haochi .frame-1171278688-1.animate-enter177 {
  animation: animate-enter177-frames 0.40s ease 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter177-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.haochi .overlap-group-6 {
  height: 568px;
  left: -25px;
  position: relative;
  top: -89px;
  width: 756px;
}

.haochi .frame-1171278694-1 {
  left: 34px;
  top: 100px;
}

.haochi .mobile-app-design-1 {
  left: 94px;
  letter-spacing: 0;
  line-height: normal;
  position: absolute;
  top: 413px;
  white-space: nowrap;
}

.haochi .ellipse-8183-1 {
  border-radius: 216px;
  height: 432px;
  left: 138px;
  opacity: 0.11;
  top: 194px;
  width: 432px;
}

.haochi .frame-1171278687-1 {
  align-items: flex-start;
  border-radius: 32.65px;
  left: 8px;
  padding: 4.6px 15.7px;
  top: 458px;
}

.haochi .vector-3297-1 {
  cursor: pointer;
  height: 29px;
  left: 664px;
  position: absolute;
  top: 413px;
  transition: all 0.4s ease;
  width: 29px;
}

.haochi .vector-3297-1:hover {
  transform: rotate(45deg);
}

.haochi .exclude {
  height: 27px;
  left: 9px;
  position: absolute;
  top: 413px;
  width: 67px;
}

.haochi .other-projects {
  left: 605px;
  letter-spacing: -2.24px;
  line-height: normal;
  position: absolute;
  text-align: center;
  top: 57px;
  white-space: nowrap;
}

.haochi .frame-container {
  align-items: flex-start;
  display: flex;
  gap: 30px;
  margin-right: 30.0px;
  margin-top: 57px;
  min-width: 1524px;
  z-index: 13;
}

.haochi .frame-1171278729 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 518px;
  opacity: 0;
  overflow: hidden;
  transform: translate(0, 25px);
  transition: all 0.2s ease;
  width: 747px;
}

.haochi .frame-1171278729.animate-enter180 {
  animation: animate-enter180-frames 0.50s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter180-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.haochi .frame-1171278729:hover {
  background-color: #3E3E3E
}

.haochi .ellipse-8183-2 {
  border-radius: 216px;
  height: 432px;
  left: 138px;
  opacity: 0.11;
  top: 193px;
  width: 432px;
}

.haochi .frame-container-1 {
  border-radius: 19.53px;
  height: 390px;
  left: 0;
  position: absolute;
  top: 0;
  width: 707px;
}

.haochi .frame-1171278688-2 {
  border-radius: 19.53px;
}

.haochi .frame-1171278688-2.animate-enter179 {
  animation: animate-enter179-frames 0.40s ease 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter179-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.haochi .overlap-group-7 {
  height: 564px;
  left: -23px;
  position: relative;
  top: -38px;
  width: 764px;
}

.haochi .x1-4 {
  cursor: pointer;
  height: 564px;
  left: 95px;
  object-fit: cover;
  position: absolute;
  top: 0;
  transition: all 0.4s ease;
  width: 564px;
}

.haochi .x1-4:hover {
  transform: scale(1.1);
}

.haochi .frame-1171278694-2 {
  left: 9px;
  top: 10px;
}

.haochi .frame-1171278690 {
  align-items: flex-end;
  border: 0.49px solid;
  border-color: var(--white);
  border-radius: 32.71px;
  display: flex;
  height: 22px;
  left: 107px;
  overflow: hidden;
  padding: 4.9px 13.9px;
  position: absolute;
  top: 458px;
  width: 83px;
}

.haochi .frame-1171278687-2 {
  align-items: flex-end;
  border-radius: 32.71px;
  left: 9px;
  padding: 4.9px 15.7px;
  top: 458px;
}

.haochi .frame-1171278730 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 518px;
  opacity: 0;
  overflow: hidden;
  transform: translate(0, 25px);
  transition: all 0.2s ease;
  width: 747px;
}

.haochi .frame-1171278730.animate-enter182 {
  animation: animate-enter182-frames 1.00s ease-in-out 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter182-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.haochi .frame-1171278730:hover {
  background-color: #3E3E3E
}

.haochi .overlap-group15 {
  height: 626px;
  left: 21px;
  position: relative;
  top: 19px;
  width: 707px;
}

.haochi .ellipse-8183-3 {
  border-radius: 216px;
  height: 432px;
  left: 137px;
  opacity: 0.11;
  top: 194px;
  width: 432px;
}

.haochi .frame-1171278688-3 {
  background-color: var(--white);
  border-radius: 19.42px;
}

.haochi .frame-1171278688-3.animate-enter181 {
  animation: animate-enter181-frames 0.40s ease 0.00s 1 normal forwards;
  opacity: 0;
  transform: translate(0, 25px);
}

@keyframes animate-enter181-frames {
  from{opacity: 0;
transform: translate(0, 25px);
}
to{opacity: 1;
transform: translate(0,0);
}
}

.haochi .group-1171278888:hover {
  transform: scale(1.1);
}

.haochi .overlap-group-8 {
  height: 412px;
  position: relative;
  width: 518px;
}

.haochi .x1-5 {
  height: 411px;
  left: 106px;
  object-fit: cover;
  position: absolute;
  top: 1px;
  width: 412px;
}

.haochi .frame-1171278694-3 {
  left: 98px;
  top: 78px;
}

.haochi .frame-1171278687-3 {
  align-items: flex-end;
  border-radius: 32.54px;
  left: 7px;
  padding: 4.9px 15.2px;
  top: 455px;
}

.haochi .ui-design-1 {
  letter-spacing: 0;
  line-height: normal;
  min-height: 12px;
  min-width: 51px;
  text-align: center;
  white-space: nowrap;
}

.haochi .vector-3297-2 {
  cursor: pointer;
  height: 29px;
  left: 663px;
  position: absolute;
  top: 411px;
  transition: all 0.4s ease;
  width: 29px;
}

.haochi .vector-3297-2:hover {
  transform: rotate(45deg);
}

.haochi .frame-1171278793 {
  -webkit-backdrop-filter: blur(49.9px) brightness(100%);
  backdrop-filter: blur(49.9px) brightness(100%);
  background-color: var(--shark);
  border: 1px solid;
  border-color: var(--mine-shaft);
  border-radius: 24.24px;
  cursor: pointer;
  height: 402px;
  margin-top: 259px;
  overflow: hidden;
  position: relative;
  transition: all 0.2s ease;
  width: 1722px;
  z-index: 14;
}

.haochi .frame-1171278793:hover {
  background-color: #3E3E3E
}

.haochi .overlap-group16 {
  height: 1024px;
  left: 348px;
  position: absolute;
  top: -882px;
  width: 1037px;
}

.haochi .ellipse-8183-4 {
  border-radius: 512px;
  height: 1024px;
  left: 0;
  opacity: 0.05;
  top: 0;
  width: 1024px;
}

.haochi .text-452 {
  left: 986px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 943px;
  white-space: nowrap;
}

.haochi .ui {
  left: 116px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 943px;
  white-space: nowrap;
}

.haochi .uiux {
  left: 349px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 943px;
  white-space: nowrap;
}

.haochi .group-1-1 {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  gap: 6px;
  height: 47px;
  left: 49px;
  min-width: 100px;
  position: absolute;
  top: 227px;
  transition: all 0.5s ease;
}

.haochi .group-1-1:hover {
  transform: scale(1.1);
}

.haochi .instagram {
  cursor: pointer;
  left: 1334px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  text-decoration: underline;
  top: 149px;
  width: 87px;
}

.haochi .a24 {
  cursor: pointer;
  left: 464px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 149px;
  width: 87px;
}

.haochi .artaloo {
  cursor: pointer;
  left: 697px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 149px;
  width: 87px;
}

.haochi .text-450 {
  cursor: pointer;
  left: 1334px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  text-decoration: underline;
  top: 210px;
  width: 87px;
}

.haochi .epiphone {
  cursor: pointer;
  left: 464px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 210px;
  width: 87px;
}

.haochi .text-451 {
  left: 1334px;
  letter-spacing: -0.80px;
  line-height: 32px;
  position: absolute;
  top: 271px;
  width: 87px;
}

.haochi .cctv-3 {
  letter-spacing: 0;
  position: absolute;
}

.haochi .ellipse-8183-5 {
  background-color: var(--alto);
  filter: blur(284.5px);;
  position: absolute;
}

.haochi .frame-1171278687-4 {
  border: 0.49px solid;
  border-color: var(--white);
  display: flex;
  height: 22px;
  overflow: hidden;
  position: absolute;
  width: 83px;
}

.haochi .frame-1171278688-4 {
  height: 390px;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transform: translate(0, 25px);
  width: 707px;
}

.haochi .frame-1171278694-4 {
  align-items: flex-start;
  background-color: var(--black);
  border-radius: 55px;
  display: flex;
  height: 35px;
  overflow: hidden;
  padding: 9px 25px;
  position: absolute;
  width: 87px;
}

.haochi .number-3 {
  letter-spacing: 0;
  line-height: normal;
}

.haochi .tm-2 {
  height: 14px;
  letter-spacing: -0.98px;
  line-height: normal;
  margin-top: 8px;
}

.haochi .union-2 {
  left: 0;
  position: absolute;
}